<template>
  <view v-if="shenheStatus == 0 && witData.cash_profit" class="cash">
    <!-- 提现方式 -->
    <view @click="showPopup = true" class="way flex-y-center flex-x-sb">
      <view>{{ $t("mdAdmin.withdrawMethods") }}</view>
      <view v-if="select_type == 'wechat'" class="flex-y-center">
        <text
          class="iconfont icon-wechat"
          style="color: #2fc445; font-size: 36rpx; margin: 0 22rpx 0 6rpx"
        ></text>
        <text>{{ $t("shop.wx") }}({{ cardData("wechat").account }})</text>
        <text class="iconfont icon-arrow-right" style="font-size: 22rpx"></text>
      </view>

      <view v-else-if="select_type == 'alipay'" class="flex-y-center">
        <text
          class="iconfont icon-zhifubao1"
          style="color: #2777fe; font-size: 44rpx"
        ></text>
        <text>{{ $t("shop.alipay") }}({{ cardData("alipay").account }})</text>
        <text class="iconfont icon-arrow-right" style="font-size: 22rpx"></text>
      </view>

      <view v-else-if="select_type == 'bank_card'" class="flex-y-center">
        <text
          class="iconfont icon-yinhangka1"
          style="color: #3fbafe; font-size: 44rpx"
        ></text>
        <text
          >{{ cardData("bank_card").bank }}({{
            cardData("bank_card").account | toString4
          }})</text
        >
        <text class="iconfont icon-arrow-right" style="font-size: 22rpx"></text>
      </view>
      <view v-else-if="select_type == 'money'" class="flex-y-center">
        <text
          class="iconfont icon-consumption-fill"
          style="color: #f1a74c; font-size: 44rpx"
        ></text>
        <text>{{ $t("shop.money") }}</text>
        <text class="iconfont icon-arrow-right" style="font-size: 22rpx"></text>
      </view>
      <!-- <view v-else-if="select_type == 3" class="flex-y-center">
        <text
          class="iconfont icon-consumption-fill"
          style="color: #fbc210"
        ></text>
        <text>微信零钱</text>
        <text class="iconfont icon-arrow-right"></text>
      </view> -->

      <view v-else class="flex-y-center">
        <text class="" style=""></text>
        <text>{{ $t("mdAdmin.chooseMethods") }}</text>
        <text class="iconfont icon-arrow-right" style="font-size: 22rpx"></text>
      </view>
    </view>

    <!-- 提现输入框 -->
    <view class="input-box">
      <view class="input-title">{{ $t("mdAdmin.withMoney") }}</view>
      <view class="input">
        <view>￥</view>
        <view>
          <u-input v-model="inputNum" placeholder=" " type="digit"></u-input>
        </view>
      </view>
    </view>

    <!-- 全部提现 -->
    <view class="all-withdrawal">
      {{ $t("mdAdmin.canWith") }}{{ witData.cash_profit
      }}{{ $t("mdAdmin.canWith1") }}，<text
        @click="inputNum = witData.cash_profit"
        style="color: #f0250e; font-weight: 600"
        >{{ $t("shop.allWithdraw") }}</text
      >
      <!-- <view v-if="cashShow" v-html="cashContent"> </view> -->

      <div style="color: #f0250e; margin-top: 10rpx">
        注：当前可提现余额为平台所有类型余额。
      </div>
    </view>

    <!-- 提交button -->
    <view @click="submit" class="btn flex-y-center flex-x-center">{{
      $t("mdAdmin.quickWith")
    }}</view>

    <!-- 提现方式选择框 -->
    <u-popup v-model="showPopup" mode="center" border-radius="24">
      <view class="popup-box">
        <view class="title"> {{ $t("mdAdmin.chooseMethods") }} </view>
        <view
          v-for="item in witData.cash_method_list"
          :key="item.type"
          @click="switchPayIndex(item.type)"
          class="popup-item flex-y-center flex-x-sb"
        >
          <view v-if="item.type == 'wechat'" class="flex-y-center">
            <text
              class="iconfont icon-wechat"
              style="color: #2fc445; font-size: 36rpx; margin: 0 22rpx 0 6rpx"
            ></text>
            {{ $t("shop.wx") }}
          </view>
          <view v-else-if="item.type == 'alipay'" class="flex-y-center">
            <text class="iconfont icon-zhifubao1" style="color: #2777fe"></text>
            {{ $t("shop.alipay") }}
          </view>
          <view v-else-if="item.type == 'bank_card'" class="flex-y-center">
            <text
              class="iconfont icon-yinhangka1"
              style="color: #3fbafe"
            ></text>
            {{ $t("shop.card") }}
          </view>
          <view v-else-if="item.type == 'money'" class="flex-y-center">
            <text
              class="iconfont icon-consumption-fill"
              style="color: #f1a74c"
            ></text>
            {{ $t("shop.money") }}
          </view>
          <view>
            <text
              v-show="select_type == item.type"
              class="iconfont icon-seleted"
              style="color: #f0250e"
            ></text>
          </view>
        </view>

        <view @click="switchPayIndex(-1)" class="popup-item flex-y-center">
          <text
            class="iconfont icon-CurrencyConverter-fill"
            style="color: #34b6ff"
          ></text>
          {{ $t("mdAdmin.addMethod") }}
        </view>
      </view>
    </u-popup>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { getPriceList, cashApply } from "@/global/api/report.js";
export default {
  components: { Shenhe },
  data() {
    return {
      inputNum: "", //输入提现金额
      showPopup: false, //popup弹框开关
      witData: {}, //提现所有数据
      cardList: [], //钱包列表
      select_type: -1, //选中提现方式索引
      // cashShow: false,
      // cashContent: "",
      confirmText: "我已知晓",
      is_area: ""
    };
  },
  onLoad(t) {
    if (t.is_area) this.is_area = "1";
  },
  onShow() {
    // 获取个人数据
    this.getCashInfo();
  },
  methods: {
    // 获取提现数据
    async getCashInfo() {
      const res = await getPriceList({
        is_area: this.is_area
      });
      if (res.code != 0) return this.$utils.toast(res.msg);
      this.witData = res.data;
      this.cardList = res.data.cash_method_list;
    },
    // 切换提现方式
    switchPayIndex(type) {
      if (type != -1) {
        this.select_type = type;
        this.showPopup = false;
      } else {
        this.$utils.toUrl("/shareholder/withdraw/pay-list", "navigate");
        this.showPopup = false;
      }
    },
    submit() {
      this.$u.throttle(async () => {
        if (this.select_type == -1)
          return this.$utils.toast(this.$t("mdAdmin.chooseMethods"));
        var reg1 = /^[0-9]+(\.[0-9]{0,2})?$/;
        if (!reg1.test(this.inputNum))
          return this.$utils.toast(this.$t("mdAdmin.confirmMoney"));

        const res = await cashApply(
          {
            cash: this.inputNum,
            type: this.select_type,
            is_area: this.is_area
          },
          true
        );
        this.$utils.toast(res.msg || "服务器出错");
        if (res.code != 0) return;
        let url = "/global/globalCash/globalCash?status=1";

        if (this.is_area) {
          url += "&is_area=1";
        }
        uni.navigateTo({
          url
        });
      }, 1000);
    }
  },
  // watch: {
  //   inputNum: {
  //     handler(newVal) {
  //       let cashProfit = (
  //         newVal *
  //         (this.witData.shareHolderCashProfit / 100)
  //       ).toFixed(2);
  //       // this.cashShow = true;
  //       this.cashContent =
  //         '提现手续费<span style="color: #f0250e; font-weight: 600;">' +
  //         cashProfit +
  //         "</span>元.";
  //     },
  //     deep: true,
  //     immediate: false,
  //   },
  // },
  computed: {
    // 根据卡类型返回当前卡信息
    cardData() {
      return function (type) {
        let i = this.cardList.findIndex((item) => item.type == type);
        if (i == -1) return false;
        return this.cardList[i];
      };
    }
  },
  filters: {
    toString4(str) {
      return str.substr(str.length - 4);
    }
  }
};
</script>

<style lang="scss" scoped>
.cash {
  color: #262626;
  font-family: PingFang SC;
  padding: 0 36rpx;
}
.way {
  height: 102rpx;
  border-bottom: 2rpx solid #f1f1f1;
  > view:nth-child(1) {
    height: 42rpx;
    font-size: 30rpx;
    font-weight: 600;
  }
  > view:nth-child(2) {
    height: 40rpx;
    font-size: 28rpx;
    .iconfont {
      font-size: 44rpx;
      &:nth-child(1) {
        margin-right: 10rpx;
      }
    }
    > text:nth-child(2) {
      margin-top: -2rpx;
    }
  }
}
.input-box {
  .input-title {
    padding: 30rpx 0;
    line-height: 42rpx;
    font-size: 30rpx;
    font-weight: 600;
  }
  .input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 20rpx;
    > view:nth-child(1) {
      font-size: 40rpx;
      font-weight: 600;
      transform: translateY(8rpx);
    }
    > view:nth-child(2) {
      flex: 1;
      width: 0;
      /deep/.u-input__input {
        font-size: 56rpx;
        font-weight: 600;
        height: 112rpx;
        color: #262626;
      }
    }
  }
}

.all-withdrawal {
  margin-top: 28rpx;
  margin-bottom: 80rpx;
  height: 34rpx;
  font-size: 24rpx;
  color: #8c8c8c;
}

.btn {
  width: 678rpx;
  height: 88rpx;
  background: #f0250e;
  opacity: 1;
  border-radius: 120rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}

.popup-box {
  width: 600rpx;
  padding: 0 50rpx;
  color: #262626;
  .title {
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
  }
  .popup-item {
    height: 100rpx;
    border-bottom: 1px solid #f1f1f1;
    font-size: 28rpx;
    .iconfont {
      font-size: 50rpx;
      margin-right: 15rpx;
    }
  }
}
</style>
